import { useState } from 'react'
import { Layer, Stage, Text } from 'react-konva'

export default function View() {
  const [isDragging, setIsDragging] = useState(false)
  const [x, setX] = useState(50)
  const [y, setY] = useState(50)

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          text='Draggable Text'
          x={x}
          y={y}
          draggable
          fill={isDragging ? 'green' : 'black'}
          onDragStart={() => {
            setIsDragging(true)
          }}
          onDragEnd={e => {
            setIsDragging(false)
            setX(e.target.x())
            setY(e.target.y())
          }}
        />
      </Layer>
    </Stage>
  )
}
